<template>
    <div>
        <!--业务进件-自然人-受理信息:zrrRzSlxxType-->
        <div class="w_100 headTips d_f j_c_s_b">
            <div class="d_f a_i_c">
                <div class="line"></div>
                {{ name }}
            </div>
            <div class="isClose" @click="close">
                <el-icon v-if="type == 'smallForm'">
                    <CloseBold />
                </el-icon>
            </div>
            <el-switch v-if="type == 'bigForm'" @change="change" v-model="status"
                style="--el-switch-on-color: #13ce66;" />
            <el-button type="primary" v-if="type == 'useForm' && isReset == 1" @click="clearForm">清除表单</el-button>
        </div>
        <div class="formBox">
            <div class="acceptance_form">
                <myform :fields="fields" :rules="rules" ref="form1" :model="model.projectData" :options="options"
                    class="m_t_16">
                    <template v-slot:agencyId>
                        <el-cascader :disabled="isAudit" v-model="model.projectData.agencyList" @change="handleSelect"
                            placeholder="请选择经办机构" :options="options.agencyId" :props="areaProps" />
                    </template>
                </myform>
            </div>
            <div class="segment" v-if="fields1.length > 0"></div>
            <div class="formArrow d_f a_i_c m_t_30" v-if="fields1.length > 0">
                <img src="../../assets/formArrow.png" alt="">
                <span>{{ subTitle || '新加字段' }}</span>
            </div>
            <div class="acceptance_form" v-if="fields1.length > 0">
                <myform :fields="fields1" :model="model.projectData" :options="options" class="m_t_16">
                </myform>
            </div>
        </div>
    </div>
</template>
<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { copy } from '../../utils/date'
import { formGet, unitFormSet, cooperativeAgencyListAll } from '../../api/system/flowPath'
import { listByParentArr } from '../../api/login'
import { Message } from '../../utils/resetMessage'
import { zrrRzSlxxType } from './data'
import { NUMBRT_REG, PHONE_REG, INTEGER } from '../../utils/regular'
import { CloseBold } from '@element-plus/icons-vue'
const model = {
    projectData: {
        productCategory: '',//产品类型
        productId: '',//产品id
        productName: '',//名称
        agencyName: '',//经办机构
        agencyId: '',
        agencyList: [],
        agencyBranchId: '',
        agencyBranchName: '',
        agencyBranch: '',
        guaMoney: '',//申请金额
        period: '',//期数
        repaymentMode: '',//还款方式
        guaranteeRate: '',//担保费率
        liability: '',//分责比例
        receivablePremium: '',//应收保费
        bankLoanClerk: '',//银行信贷员
        clerkMobile: '',//银行信贷员电话
        securityDeposit:'',
        isReview: 1
    },
}
export default defineComponent({
    name: '',
    props: {
        type: {
            type: String,
            default: '',
        },
        unitId: {
            type: [String, Number],
            default: '',
        },
        isEnabled: {
            type: [String, Number],
            default: '',
        },
        agencyName: {
            type: Array,
            default: [],
        },
        productName: {
            type: String,
            default: '',
        },
        productId: {
            type: [String, Number],
            default: '',
        },
        productCategory: {
            type: [String, Number],
            default: '',
        },
        vars: {
            type: Object,
            default: {}
        },
        isVar: {
            type: Boolean,
            default: true,
        },
        isAudit: {
            type: Boolean,
            default: true
        },
    },
    components: {
        CloseBold
    },
    setup(props: any) {
        const data: zrrRzSlxxType = reactive({
            name: '受理信息',
            subTitle: '',
            status: true,
            model: copy(model),
            fields: [
                {
                    label: "产品类型",
                    prop: 'productCategory',
                    placeholder: '请选择产品类型',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '130px',
                    disabled: true,

                },
                {
                    label: "产品名称",
                    prop: 'productName',
                    placeholder: '请输入产品名称',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: true,
                },
                {
                    label: "经办机构",
                    prop: 'agencyId',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "担保金额",
                    prop: 'guaMoney',
                    type: 'input',
                    placeholder: '请输入担保金额',
                    unit: '元',
                    disabled: false,
                    labelWidth: '130px',
                },
                {
                    label: "期限",
                    prop: 'period',
                    placeholder: '请输入期限',
                    type: 'number',
                    labelWidth: '130px',
                    unit: '个月',
                    disabled: false,
                },
                {
                    label: "还款方式",
                    prop: 'repaymentMode',
                    placeholder: '请选择还款方式',
                    bindLabel: 'name',
                    bindValue: 'id',
                    type: 'select',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "担保费率",
                    prop: 'guaranteeRate',
                    placeholder: '请输入担保费率',
                    type: 'input',
                    labelWidth: '130px',
                    unit: '%',
                    disabled: false,
                },
                // {
                //     label: "分责比例",
                //     prop: 'liability',
                //     placeholder: '请输入分责比例',
                //     type: 'input',
                //     labelWidth: '130px',
                //     unit: '%',
                // },
                {
                    label: "应收保费",
                    prop: 'receivablePremium',
                    placeholder: '请输入应收保费',
                    type: 'input',
                    labelWidth: '130px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "银行信贷员",
                    prop: 'bankLoanClerk',
                    placeholder: '请输入银行信贷员',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "信贷员联系电话",
                    prop: 'clerkMobile',
                    placeholder: '请输入信贷员联系电话',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "保证金（元）",
                    prop: 'securityDeposit',
                    placeholder: '请输入保证金',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                },
            ],
            fields1: [],
            options: {
                repaymentMode: [
                    {
                        name: '一次性还款',
                        id: 1,
                    },
                    {
                        name: '等额每月',
                        id: 2,
                    },
                    {
                        name: '等额每季',
                        id: 3,
                    },
                    {
                        name: '等额本金',
                        id: 4,
                    },
                    {
                        name: '等额本息',
                        id: 5,
                    },
                    {
                        name: '固定还款日-等额本息',
                        id: 6,
                    },
                    {
                        name: '固定还款日-最后一次还本息',
                        id: 7,
                    },
                    {
                        name: '推算日还款-等额本息',
                        id: 8,
                    },
                    {
                        name: '推算日还款-最后一次还本息',
                        id: 9,
                    },
                    {
                        name: '按银行借款合同执行',
                        id: 10,
                    },
                    {
                        name: '其他',
                        id: 11,
                    },
                ],
                productCategory: [
                    {
                        name: '融资单笔',
                        id: 1,
                    },
                    {
                        name: '融资批量',
                        id: 2,
                    },
                    {
                        name: '非融单笔',
                        id: 3,
                    },
                    {
                        name: '非融批量',
                        id: 4,
                    },
                ],
                agencyId: [],
            },
            rules: {
                productCategory: [
                    { required: true, message: '请选择产品类型', trigger: 'change' },
                ],
                productName: [
                    { required: true, message: '请输入产品', trigger: 'blur' },
                ],
                agencyId: [
                    { required: true, message: '请选择经办机构', trigger: 'change' },
                ],
                guaMoney: [
                    { required: true, message: '请输入担保金额', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '担保金额格式不正确' }
                ],
                period: [
                    { required: true, message: '请输入期数', trigger: 'blur' },
                    { pattern: INTEGER, message: '期数格式不正确' }
                ],
                repaymentMode: [
                    { required: true, message: '请选择还款方式', trigger: 'change' },
                ],
                guaranteeRate: [
                    { required: true, message: '请输入担保费率', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '担保费率格式不正确' }
                ],
                receivablePremium: [
                    { required: true, message: '请输入应收保费', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '应收保费格式不正确' }
                ],
                clerkMobile: [
                    { pattern: PHONE_REG, message: '联系人电话格式不正确' }
                ],
                securityDeposit:[
                { pattern: NUMBRT_REG, message: '保证金格式不正确' }
                ],
            },
            id: '',
            isReset: 2,
            areaProps: {
                multiple: false,
                value: 'id',
                label: 'name',
                children: 'bankIds',
                checkStrictly: true,
            },
        })
        const router = useRouter()
        const form1 = ref()
        onBeforeMount(() => {
            methods.getData()
            data.status = props.isEnabled == 0 ? false : true
            if (!props.isVar) {
                data.model.projectData.productName = props.productName
                data.model.projectData.productId = props.productId
                data.model.projectData.productCategory = props.productCategory
            }
        })
        const methods = {
            close() {
                router.push('/system/flowPath/childForm/index')
            },
            //获取自定义表单
            getData() {
                cooperativeAgencyListAll({ productId: props.productId }).then((res: any) => {
                    data.options.agencyId = res
                    formGet({ tag: 'zrrRzSlxx' }).then((res: any) => {
                        data.id = res.id
                        data.name = res.name
                        data.isReset = res.isReset
                        if (!res.formStruct || res.formStruct == 'null' || res.formStruct == '{}') return
                        data.subTitle = res.subTitle
                        let formStruct = JSON.parse(res.formStruct)
                        formStruct.formFields.map((item: any) => {
                            data.model.projectData[item.prop] = ''
                        })
                        data.fields1 = formStruct.formFields
                        data.fields.map((item: any) => {
                            if (item.prop != 'productCategory' || item.prop != 'productName') {
                                item.disabled = props.isAudit
                            }
                        })
                        data.fields1.map((item: any) => {
                            item.disabled = props.isAudit
                        })
                        if (props.vars) {
                            const localData = props.vars
                            console.log(localData);
                            for (let key in data.model.projectData) {
                                if (localData.projectData[key] != null) {
                                    data.model.projectData[key] = localData.projectData[key]
                                }
                            }
                            if (props.productName) {
                                data.model.projectData.productName = props.productName
                                data.model.projectData.productId = props.productId
                                data.model.projectData.productCategory = props.productCategory
                            }
                            if (data.options.agencyId.some(item => item.id == localData.projectData.agencyId)) {
                                if (localData.projectData.agencyBranchId) {
                                    data.model.projectData.agencyList = [localData.projectData.agencyId, localData.projectData.agencyBranchId]
                                } else {
                                    data.model.projectData.agencyList = [localData.projectData.agencyId]
                                }
                            } else {
                                data.model.projectData.agencyList = []
                                data.model.projectData.agencyId = ''
                            }
                        }
                        data.fields[0].disabled = data.fields[1].disabled = true
                        let arr = formStruct.formFields.filter((item: any) => {
                            return item.type == 'select'
                        })
                        let ids = arr.map((item: any) => {
                            return item.prop
                        })
                        if (ids.length == 0) return
                        listByParentArr({ ids: ids }).then((res: any) => {
                            ids.map((item: any) => {
                                data.options[item] = res[item]
                            })
                        })
                    })
                })

            },
            //设置表单的启用跟停用
            change() {
                unitFormSet({ isEnabled: data.status ? 1 : 0, id: data.id, unitId: props.unitId }).then(() => {
                    Message({ type: 'success', message: '设置成功' })
                }).catch(() => {
                    data.status = !data.status
                })
            },
            handleSelect() {
                data.model.projectData.agencyId = data.model.projectData.agencyList[0]
                if (data.model.projectData.agencyList.length == 2) {
                    data.model.projectData.agencyBranchId = data.model.projectData.agencyList[1]

                } else {
                    data.model.projectData.agencyBranchId = ''
                    data.model.projectData.agencyBranchName = ''
                }
                data.options.agencyId.map((item: any) => {
                    if (item.id == data.model.projectData.agencyId) {
                        data.model.projectData.agencyName = item.name
                        item.bankIds.map(item1 => {
                            if (data.model.projectData.agencyBranchId == item1.id) {
                                data.model.projectData.agencyBranchName = item1.name
                            }
                        })
                    }
                })
            },
            //清除表单数据
            clearForm() {
                data.model = copy(model)
                if (!props.isVar) {
                    data.model.projectData.productName = props.productName
                    data.model.projectData.productId = props.productId
                    data.model.projectData.productCategory = props.productCategory
                }
            },
            resultData() {
                return new Promise((resolve, reject) => {
                    form1.value.verification().then(() => {
                        resolve(data.model)
                    }).catch(() => {
                        reject(false)
                    })

                })

            },
            saveData() {
                return new Promise((resolve, reject) => {
                    resolve(data.model)
                })
            },
        }
        // 监听props的变化
        watch(
            () => props, (newValue, oldValue) => {
                if (newValue) {
                    if (props.vars) {
                        methods.getData()
                    }
                }
            }, { immediate: true, deep: true },);
        return {
            ...toRefs(data),
            ...methods, form1
        }
    }
})
</script>
<style lang='scss'>
.acceptance_form {
    .el-form-item {
        width: 50% !important;
        margin-right: 0px !important;

        .el-form-item__content {
            width: calc(100% - 130px) !important;

            .el-input,
            .el-cascader,
            .el-select {
                width: 100% !important;
            }
        }

    }
}
</style>